const baseUrl = 'http://api-breakingnews-web.itheima.net'

//1.点击注册  ==>  注册页面
$('#goto-register').on('click', () => {
  //1.1注册页面显示
  $('#register').show()
})
//2.点击登录 ==> login页面
$('#goto-login').on('click', function () {
  //2.1注册页面隐藏
  $('#register').hide()
})
//3.注册新用户
//3.1  注册按钮点击事件  (lay-submit  layui提供的属性  相当于input type='submit')
/**
 * 给input注册submit提交事件   
 * 搜集表单数据
 * 发送请求
*/
$('#register form').on('submit', (e) => {
  //阻止事件默认行为
  e.preventDefault()
  const form = layui.form; // 引用layui.js后, 有layui对象(类似于$), 然后拿到内部的form对象(用来管理所有用layui创建的表单-以及使用了lay-veify属性的标签)
  //3.2 表单验证
  form.verify({ // 指定规则名和对应的验证规则
    username: [ // 用户名
      /^[a-z0-9]{6,10}$/,
      '账号名是6到10位由数字, 小写字母组成'
    ],
    password: [ // 密码
      /^[\S]{6,10}$/,
      '密码是6到10位, 不能有空格'
    ],
    // 注册页-确认密码
    repwd: function (value) { // 为什么用函数, 因为不光要获取这个规则对应的标签的值, 还需要用jQ获取另外一个标签的值
      return ($(".pwd").val() !== value) && '两次密码不相同'
    },
  })
  //3.3搜集表单数据
  const regData = $('#register form').serialize()
  //3.4 发送请求
  axios.post(`${baseUrl}/api/reguser`, regData).then((res) => {
    //3.4.1提示用户注册成功 或 失败
    const { message, status } = res.data
    layer.msg(message);
    if (status === 0) {
      //跳转登录页面
      $('#register').hide()
    }
  })
})
//4.登录功能
//4.1注册点击事件
let flag = true
$('#login form').on('submit', function (e) {
  //阻止默认行为
  e.preventDefault()
  //4.2搜集表单数据
  const loginData = $(this).serialize()
  //4.3发送请求
  axios.post(`${baseUrl}/api/login`, loginData).then((res) => {
    const { message, status,token } = res.data
   if(flag){
      //提示登录成功还是失败
    layer.msg(message);
    flag = false
   }
    //成功
    if(status === 0){
      //保存token到本地
      localStorage.setItem('token',token)
      //跳转到首页
      setTimeout(() => {
        location.href='/index.html'
      }, 1000);
    }
  })
})